<!--
 * @Author: chenhuanhuan 2925102113@qq.com
 * @Date: 2024-09-13 14:58:46
 * @LastEditors: wuyuanhong wuyuanhong@szhbzc.com
 * @LastEditTime: 2024-09-25 17:38:43
 * @FilePath: \xiamenAgency\src\view\menu\basicInformation\basicData\supplyInformationManage\components\intelligentImport.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
	<div>
		<cus-modal ref="modal" title="智能导入信息" @on-visible-change="onVisibleChange" width="750">
			<Form ref="supplyFormRef" :model="supplyForm" :rules="supplyRules" :label-width="120">
				<FormItem label="数据起始行数" prop="readRow" class="mb_20">
					<InputNumber :max="999999" :min="0" v-model="supplyForm.readRow" style="width: 200px"
						placeholder="请输入数据起始行数" />
				</FormItem>
				<FormItem label="商品名称位置" prop="foodName">
					<Input v-model="supplyForm.foodName" clearable style="width: 200px" placeholder="请输入商品名称位置">
					</Input>

				</FormItem>
				<FormItem label="计量单位位置" prop="packagingUtil" class="mb_20">
					<Input v-model="supplyForm.packagingUtil" clearable style="width: 200px" placeholder="请输入计量单位位置">
					</Input>
				</FormItem>
				<FormItem label="单价位置" prop="packagingPrice" class="mb_20">
					<Input v-model="supplyForm.packagingPrice" clearable style="width: 200px" placeholder="请输入单价位置">
					</Input>
				</FormItem>
				<FormItem label="单位重量位置" prop="unitWeight" class="mb_20">
					<Input v-model="supplyForm.unitWeight" clearable style="width: 200px" placeholder="请输入单位重量位置">
					</Input>
				</FormItem>
				<FormItem label="商品编码位置" prop="raiseCode" class="mb_20">
					<Input v-model="supplyForm.raiseCode" clearable style="width: 200px" placeholder="请输入商品编码位置">
					</Input>
				</FormItem>
				<FormItem label="商品分类位置" prop="productCategoryName" class="mb_20">
					<Input v-model="supplyForm.productCategoryName" clearable style="width: 200px" placeholder="请输入商品分类位置">
					</Input>
				</FormItem>
				<FormItem label="食材分类位置" prop="foodClass" class="mb_20">
					<Input v-model="supplyForm.foodClass" clearable style="width: 200px" placeholder="请输入食材分类位置">
					</Input>
				</FormItem>
				<FormItem label="生效日期位置" prop="effectiveDate" class="mb_20">
					<Input v-model="supplyForm.effectiveDate" clearable style="width: 200px" placeholder="请输入生效日期位置">
					</Input>
				</FormItem>
				<FormItem label="商品码位置" prop="snCode" class="mb_20">
					<Input v-model="supplyForm.snCode" clearable style="width: 200px" placeholder="请输入商品码位置">
					</Input>
				</FormItem>
				<FormItem label="品牌位置" prop="brand" class="mb_20">
					<Input v-model="supplyForm.brand" clearable style="width: 200px" placeholder="请输入品牌位置">
					</Input>
				</FormItem>
				<!-- <FormItem label="">
          <Checkbox v-model="supplyForm.multipleSheet" :true-value="1" :false-value="0">是否多sheet
          </Checkbox>
        </FormItem> -->
				<!-- <cus-upload :uploadFnc="uploadFnc" :autoUpload="true" :accept="accept" @onOk="onOk"
          @onBeforeUpload="onBeforeUpload" :cus-params="upParams" :fileName="fileName"
          @onError="onError">
          <Button icon="ios-cloud-upload-outline">导入Excel文件</Button>
        </cus-upload> -->
			</Form>

			<template #footer>
				<cus-upload :uploadFnc="uploadFnc" :autoUpload="true" :accept="accept" @onOk="onOk"
					@onBeforeUpload="onBeforeUpload" :cus-params="upParams" :fileName="fileName" @onError="onError">
					<Button icon="ios-cloud-upload-outline" :disabled="disabled">导入Excel文件</Button>
				</cus-upload>
			</template>
		</cus-modal>
	</div>
</template>
<script>
export default {
	name: '',
	props: {
		uploadFnc: {
			type: Function,
			default: () => { }
		},
		accept: {
			type: String,
			// excel -> application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel
			default: ''
		},
		fileName: {
			type: String,
			default: 'file'
		},
		area: {
			type: String,
			default: ''
		}
	},
	components: {},
	data() {
		return {
			supplyForm: {
				readRow: 0,
				foodName: '',
				packagingUtil: '',
				packagingPrice: '',
				unitWeight: '',
				raiseCode: '',
				productCategoryName: '',
				foodClass: '',
				effectiveDate: '',
				brand: '',
				snCode: '',
				multipleSheet: 0
			},
			// 表单校验
			supplyRules: {
				readRow: [
					{ required: true, message: '数据起始行数不能为空', trigger: 'blur',type: 'number', },
				],
				foodName: [
					{ required: true, message: '商品名称位置不能为空', trigger: 'blur' },
					{
						pattern: '^[a-zA-Z]{1,2}$',
						message: '请输入合法的字母(至多两位)',
						trigger: ['blur', 'change']
					}
				],

				// packagingUtil: [
				// 	{ required: true, message: '计量单位位置不能为空', trigger: 'blur' },
				// 	{
				// 		pattern: '^[a-zA-Z]{1,2}$',
				// 		message: '请输入合法的字母(至多两位)',
				// 		trigger: ['blur', 'change']
				// 	}
				// ],
				// packagingPrice: [
				// 	{ required: true, message: '单价位置不能为空', trigger: 'blur' },
				// 	{
				// 		pattern: '^[a-zA-Z]{1,2}$',
				// 		message: '请输入合法的字母(至多两位)',
				// 		trigger: ['blur', 'change']
				// 	}
				// ]
			},

			upParams: {},
			disabled: true
		}
	},
	watch: {
		supplyForm: {
			handler(val) {
				let reg = /^[a-zA-Z]{1,2}$/
				let resRow = /^\d+$/
				if (
					reg.test(val.foodName) && resRow.test(val.readRow)
				) {
					this.disabled = false
				} else {
					this.disabled = true
				}
				let { readRow, multipleSheet, ...rest } = val
				this.upParams = {
					kitchenArea: this.area,
					readRow,
					multipleSheet,
					columnName: JSON.stringify({
						...rest
					})
				}
				console.log(this.upParams, 999)
			},
			immediate: true,
			deep: true
		}
	},
	methods: {
		show(info) {
			if (info) {
				let { multipleSheet, readRow } = info
				let column = JSON.parse(info.columnName)
				this.supplyForm = {
					...this.supplyForm,
					multipleSheet,
					readRow,
					...column
				}
			}
			this.$refs['modal'].show = true
		},
		onVisibleChange(v) {
			this.$refs['supplyFormRef'].resetFields()
			console.log(this.disabled)
		},
		onError(data) {
			this.$emit('onError', data)
		},
		onBeforeUpload(file) {
			this.$emit('onBeforeUpload', file)
		},

		onOk(res) {
			console.log(res, '成功')
			this.$refs['modal'].show = false
			this.$emit('onOk', res)
		}
	}
}
</script>
<style  lang='scss' scoped></style>